<%--
  Created by IntelliJ IDEA.
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page import="com.free4inno.pagesite.utils.ssUtils" %>
<%@ page language="java" import="java.util.List" pageEncoding="UTF-8" %>
<html>
<head>
    <link href="../assets/vendor/bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="../assets/vendor/bootstrap/bootstrap-icons.css" rel="stylesheet" type="text/css"/>
    <link href="../assets/css/my.css" rel="stylesheet" type="text/css"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../assets/vendor/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../assets/vendor/bootstrap/bootstrap.bundle.min.js"></script>
    <title><%= request.getAttribute("title")%>
    </title>
    <link rel="icon" href="../userConfig/favicon.png">
    <style>

        body {

            overflow-x: hidden;
        }

        .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle {
            color: #fff !important;
            background-color: #007bff !important;
            border-color: #007bff !important;

        }

        .page-btn {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        #list-resource {
            width: 1170px;
            /*width: 100%;*/
            padding: 14px;
        }

        .ul-container {
            display: flex;
            justify-content: center;
        }

        .logo {
            display: block;
            height: 50px;
            width: auto;
            margin-left: -15px;
            /*position: relative;*/
            /*top: -5px;*/
            /*left: -19px;*/
            /*width: 266px !important;*/
        }

        .logoa {
            margin: 0;
            padding: 0;
        }


        .btn-light {
            background-color: #f2f2f2 !important;
            border-color: #f2f2f2 !important;
            color: #6c757d !important;
            margin: 2px 10px 5px 10px !important;
        }

        .btn-light:hover {
            color: #888888;
        }

        #input-queryStr {
            background-color: #fff !important;
        }

        @media screen and (max-width: 576px) {
            #list-container {
                /*margin-right: 15px !important;*/
                margin-top: 15px !important;
                width: calc(100vw - 30px) !important;
            }

            .content-box {
                width: calc(100vw - 30px) !important;
            }

            .newinner {
                padding-left: 0 !important;
            }

            .logo {
                left: 0;
            }
        }

        .form-control {
            height: 54px;
        }

        .btn-primary {
            padding: 0 38px;
            font-size: 1rem;
            height: 54px;
            line-height: 54px;
            box-sizing: border-box;
        }

    </style>
</head>


<body style="background-color: #f2f2f2">


<div style="position: fixed; top: 0;left: 0;width: 100%;height:80px;background: #f2f2f2;z-index: 99">
    <%--    <div class="container col-lg-11 col-md-11 col-sm-11">--%>
    <%--        <ul class="navbar-nav">--%>
    <%--            <li class="nav-item">--%>
    <%--                <a class="nav-link text-primary" href="./">--%>
    <%--                    <img src="../static/images/logo.png" id="logo" class="rounded float-left logo" >--%>
    <%--                    <div class="text-center mt-2" style="color: dimgrey"></div>--%>
    <%--                </a>--%>
    <%--            </li>--%>
    <%--        </ul>--%>
    <%--    </div>--%>
    <div class="container  col-lg-11 col-md-11 col-sm-11 col-xs-11 content-box dif"
         style="width: 1170px; overflow: hidden; height: auto;margin: 15px auto;">
        <a class="nav-link logoa text-primary" href="./">
            <img src="../userConfig/logo.png" id="logo" class="rounded float-left logo">
        </a>
    </div>
</div>


<div class="container col-lg-12 col-md-12 col-sm-12" id="newcm"
     style="background-position: center;padding: 75px 0 15px">
    <div class="row col-lg-10 col-md-10 col-sm-10" style="justify-content: center;margin: 0 auto;">
        <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 p-2 pt-5" style="max-width: 640px;">
            <div class="input-group">
                <input type="text" class="form-control" id="input-queryStr" onkeydown="enter(event)"
                       placeholder="<%= request.getAttribute("defaultSearchTerms")%>" aria-label="query-string"
                       aria-describedby="btn-search">
                <div class="input-group-append">
                    <button class="btn btn-primary btn-sm" type="button" id="btn-search" onclick="search()">搜&nbsp索
                    </button>
                </div>
            </div>
        </div>
    </div>


    <div id="demo" class="collapse in">
        <div class="row col-lg-10 col-md-10 col-sm-10" style="margin: 0 auto">
            <div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 m-auto pb-3 newinner"
                 style="padding-left:22px;padding-right:0px;display: flex;flex-wrap: wrap;max-width: 684px;">
                <%
                    List<ssUtils> arr1 = (List<ssUtils>) request.getAttribute("advancedSearch");
                    for (ssUtils list : arr1) {
                %>
                <button class="btn btn-sm btn-light" onclick="clickLabel('<%=list.getKey()%>')"
                        data-value="<%=list.getValue()%>"
                        id="btn-label-<%=list.getKey()%>"><%=list.getKey()%>
                </button>
                <%
                    }
                %>
            </div>

        </div>

    </div>

    <center>
        <button type="button" class="btn btn-sm newsm" data-toggle="collapse" data-target="#demo">
            ∨<%=request.getAttribute("advancedSearchText")%>
        </button>
    </center>
</div>
</div>
</div>


<%--<div lass="container bg-white warp2 col-lg-12 col-md-12 col-sm-12 col-xs-12" style="display: flex;justify-content: center;">--%>
<div class="container bg-white warp2 col-lg-11 col-md-11 col-sm-11 col-xs-11 content-box"
     style="width: 1170px;height: auto;margin: 15px auto;" id="block-resource">
    <div class="mt-2 d-none" id="loading-resource">
        <ul class="list-group list-group-flush">
            <li class="list-group-item pt-3 m-auto">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </li>
        </ul>
    </div>

    <div class="row">
        <div class="col-md-8 title"><%=request.getAttribute("classificationSearchText")%>
        </div>
    </div>
    <%
        List<ssUtils> arr2 = (List<ssUtils>) request.getAttribute("classificationSearch");
        for (ssUtils list : arr2) {
    %>
    <button type="button" class="btn btn-light btn-sm btn-label-item" id="btn-label-9"
            onclick="gotoLabel('<%=list.getValue()%>')"><span><%=list.getKey()%></span></button>
    <%}%>


    <br><br/>
    <div class="row">
        <div class="col-md-8 title"><%=request.getAttribute("hotSearchText")%>
        </div>
    </div>

    <%
        List<ssUtils> hotSearch = (List<ssUtils>) request.getAttribute("hotSearch");
        for (ssUtils list : hotSearch) {
    %>
    <button type="button" class="btn btn-light btn-sm btn-label-item" id="btn-label-9"
            onclick="gotoLabel('<%=list.getValue()%>')"><span><%=list.getKey()%></span></button>
    <%}%>

</div>
<%--</div>--%>

<div class="ul-container col-lg-11 col-md-11 col-sm-11 col-xs-11" id="list-container"
     style="margin: 15px auto 0;padding: 0px;">
    <ul class="list-group list-group-flush" id="list-resource" style="padding: 0;"></ul>
</div>

<footer class="footer-default">
    <div class="text-center">Copyright © All Right Reserved by <a href="http://www.free4inno.com/" target="_blank">自邮之翼</a></div>
</footer>

</body>


<%
%>
<script>
    $(".newsm").click(function () {

        if ($(this).html().trim() === "∨" + '<%=request.getAttribute("advancedSearchText")%>') {
            $(this).html("∧" + '<%=request.getAttribute("advancedSearchText")%>');
        } else if ($(this).html().trim() == "∧" + '<%=request.getAttribute("advancedSearchText")%>') {
            $(this).html("∨" + '<%=request.getAttribute("advancedSearchText")%>');
        }
    });

    /* 基本常量 */
    let labelNum = 9;
    let pageSize = 10;

    /* 请求参数 */
    let queryLabels = "";
    let queryStr = "";
    let currentPage = 1;


    function clickLabel(id) {
        let btnClicked = $("#btn-label-" + id);
        btnClicked.hasClass("active") ? btnClicked.removeClass("active") : btnClicked.addClass("active");
    }

    // 监听搜索回车键
    function enter(e) {
        var evt = window.event || e;
        if (evt.keyCode == 13) {
            search()
        }
    }

    function search() {
        setQueryLabels();
        setQueryString();
        clearPageCount();
        setResourceList();
    }

    function gotoLabel(name) {
        setSingleQueryLabel(name);
        clearQueryString();
        clearPageCount();
        setResourceList();
    }

    function setQueryLabels() {
        let labels = [];
        let $btn = $(".btn.btn-sm.btn-light.active");
        for (let i = 0; i < $btn.length; i++) {
            labels.push($($btn[i]).attr("data-value") + "");
        }

        $(".btn-label-item").each(function (i, n) {
            $(this).removeClass('active')
        })
        queryLabels = JSON.stringify(labels);
    }

    function setSingleQueryLabel(labelName) {
        let labels = [];
        labels.push(labelName);
        queryLabels = JSON.stringify(labels);
    }

    function setQueryString() {
        queryStr = $("#input-queryStr").val();
    }

    function clearQueryString() {
        $("#input-queryStr").val('');
        queryStr = '';
    }

    function clearPageCount() {
        currentPage = 1;
    }

    function scrollPosition(id, p_top, animate) {
        let offset = $(id).offset();
        if (animate) {
            /* 动画过渡 */
            $('body, html').animate({
                scrollTop: offset.top + p_top
            });
        } else {
            /* 直接过渡 */
            $('body, html').scrollTop(offset.top + p_top);
        }
    }

    function scrollToTop(animate) {
        if (animate) {
            /* 动画过渡 */
            $('body, html').animate({
                scrollTop: 0
            });
        } else {
            /* 直接过渡 */
            $('body, html').scrollTop(0);
        }
    }

    function nextPage() {
        currentPage++;
        setResourceList();
    }

    function lastPage() {
        currentPage--;
        setResourceList();
    }

    function showResourceLoading() {
        $('#loading-resource').removeClass('d-none');
        scrollToTop(false);
    }

    function hideResourceLoading() {
        $('#loading-resource').addClass('d-none');
    }

    function happenTimeFun(num) {//时间戳数据处理
        let date = new Date(num);
        //时间戳为10位需*1000，时间戳为13位的话不需乘1000
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;//月补0
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;//天补0
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;//小时补0
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;//分钟补0
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;//秒补0
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    }

    function setResourceList() {
        $('#list-resource').html('');
        $("#block-resource").hide();
        showResourceLoading();
        $.ajax({
            type: "GET",
            url: "../search",
            data: {
                queryStr: queryStr,
                labelNames: queryLabels,
                pageNum: currentPage,
                pageSize: pageSize
            },
            success: function (data) {
                let result = JSON.parse(data);
                console.log(result);

                if (result.code === 200) {
                    console.log("执行成功.")
                    let htmlStr = "";
                    htmlStr += '<li class="list-group-item pt-3" style="color: #818182"><a onclick="window.location.reload()" href="#">首页</a>&nbsp;| 共有&nbsp;' + result.data.totalResources + '&nbsp;条搜索结果</li>';
                    for (let i = 0; i < result.data.resource.length; i++) {
                        let resource = result.data.resource[i];
                        htmlStr +=
                            '<li class="list-group-item pt-3">' +
                            '<div class="row">' +
                            '<h5 class="text-left col-6"><a href="./resource?id=' + resource.id + '" target="_blank">' + resource.title + '</a></h5>' +
                            '<div class="text-right col-6" style="color: #818182">' + resource.label_name.replace(/,/g, "&nbsp;/&nbsp;") + '</div>' +
                            '</div>' +
                            '<text>' + resource.text + '</text>' +
                            '<div class="row">' +
                            '<div class="text-left col-6" style="color: #818182">' + resource.user_name + '</div>' +
                            '<div class="text-right col-6" style="color: #818182">' + happenTimeFun(resource.edit_time) + '</div>' +
                            '</div>' +
                            '</li>';
                    }
                    if (result.data.totalPages !== 0) {
                        htmlStr += '<li class="list-group-item m-auto page-btn" style="color: #818182">';
                        if (currentPage > 1 && currentPage <= result.data.totalPages) {
                            htmlStr +=
                                '<button class="btn btn-default" onclick="lastPage()">' +
                                '<i class="bi bi-chevron-left" style="color: #818182"></i>' +
                                '</button>';
                        } else {
                            htmlStr +=
                                '<button class="btn btn-default" disabled="true">' +
                                '<i class="bi bi-chevron-left" style="color: white"></i>' +
                                '</button>';
                        }
                        htmlStr += currentPage + '&nbsp;/&nbsp;' + result.data.totalPages;
                        if (currentPage < result.data.totalPages && currentPage >= 1) {
                            htmlStr +=
                                '<button class="btn btn-default" onclick="nextPage()">' +
                                '<i class="bi bi-chevron-right" style="color: #818182"></i>' +
                                '</button>';
                        } else {
                            htmlStr +=
                                '<button class="btn btn-default" disabled="true">' +
                                '<i class="bi bi-chevron-right" style="color: white"></i>' +
                                '</button>';
                        }
                        htmlStr += '</li>';
                    }
                    $("#list-resource").html(htmlStr);
                    hideResourceLoading();
                    scrollToTop(false);
                } else {
                    //alert("请求错误！");
                    hideResourceLoading();
                    var htmlStr = '<li class="list-group-item pt-3" style="color: #818182"><a onclick="window.location.reload()" href="#">首页</a>&nbsp;| 共有&nbsp;' + 0 + '&nbsp;条搜索结果</li>';
                    $("#list-resource").html(htmlStr);
                }
            },
            error: function () {
                alert("请求错误！");
            }
        });
    }

</script>
</html>


